<template>
  <div class="list-container">
    <div v-if="showAsider" class="asider-container">
      <slot name="aside"/>
    </div>
    <div :class="['content-container', showAsider ?  'has-asider' : 'no-asider']">
      <div class="search-container" v-if="showSearch">
        <slot name="search"></slot>
      </div>
      <div class="data-container">
        <div class="operate" v-if="showOperate">
          <slot name="operate"></slot>
        </div>
        <div class="content">
          <slot name="content"></slot>
        </div>
      </div>
    </div>
    <slot/>
  </div>
</template>

<script>
export default {
  name: "ListCard",
  props: {
    showAsider: {
      type: Boolean,
      default: false
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showOperate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.list-container {
  width: 100%;
  height: calc(100vh - 90px);
  background: $base-content-background;
  .asider-container {
    width: 17%;
    height: calc(100% - 8px);
    margin: 8px;
    border: 1px solid #e4e7ed;
    padding: 24px 12px;
    display: inline-block;
    border-radius: 4px;
    vertical-align: top;
  }

  .content-container {
    display: inline-block;
    height: calc(100% - 12px);
    overflow: auto;
  }

  .has-asider {
    width: calc(100% - 17% - 21px);
    margin: 8px auto;
  }

  .no-asider {
    width: calc(100% - 16px);
    margin: 8px;
  }

  .search-container {
    width: 100%;
    color: #303133;
    padding: 12px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    transition: 0.3s;
    margin-bottom: 10px;

    ::v-deep.el-form-item {
      padding: 5px 0;
      margin: auto 5px;

      .el-form-item__label {
        font-size: $base-form-font-size !important;
      }

      .el-form-item__content {
        font-size: $base-content-font-size !important;
      }

      .el-button {
        font-size: $base-button-font-size !important;
      }
    }
  }

  .data-container {
    width: 100%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    color: #303133;

    .operate {
      width: 100%;
      padding: 8px 12px;
      display: inline-block;
      border-bottom: 1px solid #e4e7ed;

      .el-button {
        font-size: $base-button-font-size !important;
      }
    }

    .content {
      padding: 12px;

      ::v-deep.el-table {
        .el-table__cell {
          font-size: $base-content-font-size !important;
        }

        .el-button {
          font-size: $base-button-font-size !important;
        }
      }

      ::v-deep.table-expand-description {
        padding: 5px 64px;
        font-size: $base-content-font-size !important;

        .label {
          width: 120px;
          color: #0f0e0e;
          font-size: $base-content-font-size;
        }

        .content {
          width: calc(100% - 120px);
          white-space: normal !important;
          font-size: $base-content-font-size;
        }
      }
    }
  }
}
</style>
